<template>
  <div class="dashboard-editor-container">

    <div class="home-wrapper">
      <el-card style="margin-bottom: 18px; font-size: 14px">
        <div slot="header"><span>工作台</span></div>
        <div class="first"><img alt="" :src="avatar"
                                style="width: 50px; height: 50px; float:left; margin-right:10px;border-radius:50%"/>
          <p style="font-size:16px;margin-bottom:8px">{{ name }}，{{ hello }}</p>
          <p style="font-size:12px;color:rgb(185, 181, 189)">今天是：{{ nowTime }}</p>
        </div>
        <div class="first">
          <ul>
            <li class="li" style="width: 33%">仓库
              <el-popover class="ml5" content="功能开发中" placement="top" trigger="hover"><i
                class="el-icon-warning-outline" slot="reference"></i></el-popover>
            </li>
            <li class="li" style="width: 33%">库区
              <el-popover class="ml5" content="功能开发中" placement="top" trigger="hover"><i
                class="el-icon-warning-outline" slot="reference"></i></el-popover>
            </li>
            <li class="li" style="width: 33%">货架
              <el-popover class="ml5" content="功能开发中" placement="top" trigger="hover"><i
                class="el-icon-warning-outline" slot="reference"></i></el-popover>
            </li>
          </ul>
          <ul>
            <li class="da" style="width: 33%">
              <router-link to="/basic/warehouse">10</router-link>
            </li>
            <li class="da" style="width: 33%">
              <router-link to="/basic/area">20</router-link>
            </li>
            <li class="da" style="width: 33%">
              <router-link to="/basic/rack">30</router-link>
            </li>
          </ul>
        </div>
      </el-card>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-card shadow="always" style="padding-bottom: 20px">
            <div slot="header"><span>预警/到期</span></div>
            <ul>
              <li class="li" style="width: 50%">库存预警
                <el-popover class="ml5" content="功能开发中" placement="top" trigger="hover"><i
                  class="el-icon-warning-outline" slot="reference"></i></el-popover>
              </li>
              <li class="li" style="width: 50%">库存到期
                <el-popover class="ml5" content="功能开发中" placement="top" trigger="hover"><i
                  class="el-icon-warning-outline" slot="reference"></i></el-popover>
              </li>
            </ul>
            <ul>
              <li class="da" style="width: 50%">10</li>
              <li class="da" style="width: 50%">5</li>
            </ul>
          </el-card>
        </el-col>
        <el-col :span="16">
          <el-card shadow="always" style="padding-bottom: 20px">
            <div slot="header"><span>客户/供应商/承运商/物料</span></div>
            <div>
              <ul>
                <li class="li">客户
                  <el-popover class="ml5" content="功能开发中" placement="top" trigger="hover"><i
                    class="el-icon-warning-outline" slot="reference"></i></el-popover>
                </li>
                <li class="li">供应商
                  <el-popover class="ml5" content="功能开发中" placement="top" trigger="hover"><i
                    class="el-icon-warning-outline" slot="reference"></i></el-popover>
                </li>
                <li class="li">承运商
                  <el-popover class="ml5" content="功能开发中" placement="top" trigger="hover"><i
                    class="el-icon-warning-outline" slot="reference"></i></el-popover>
                </li>
                <li class="li">物料
                  <el-popover class="ml5" content="功能开发中" placement="top" trigger="hover"><i
                    class="el-icon-warning-outline" slot="reference"></i></el-popover>
                </li>
              </ul>
              <ul>
                <li class="da">
                  <router-link to="/relation/customer">50</router-link>
                </li>
                <li class="da">
                  <router-link to="/relation/supplier">5</router-link>
                </li>
                <li class="da">
                  <router-link to="/relation/carrier">4</router-link>
                </li>
                <li class="da">
                  <router-link to="/item">24</router-link>
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <panel-group @handleSetLineChartData="handleSetLineChartData"/>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData"/>
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import {mapGetters} from "vuex";

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      tableData: [{
        date: '1',
        name: '应急',
        address: '20'
      }],
      nowTime: '',
      hello: '',
      info: "info"
    }
  },
  computed: {
    ...mapGetters(['avatar', 'name'])
  },
  created() {
    this.timeFormate(new Date())
    this.helloTimes()
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear()
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? '0' + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1
      let date =
        new Date(timeStamp).getDate() < 10
          ? '0' + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate()
      let hh =
        new Date(timeStamp).getHours() < 10
          ? '0' + new Date(timeStamp).getHours()
          : new Date(timeStamp).getHours()
      let mm =
        new Date(timeStamp).getMinutes() < 10
          ? '0' + new Date(timeStamp).getMinutes()
          : new Date(timeStamp).getMinutes()
      let ss =
        new Date(timeStamp).getSeconds() < 10
          ? '0' + new Date(timeStamp).getSeconds()
          : new Date(timeStamp).getSeconds()
      let week = new Date(timeStamp).getDay()
      let weeks = ['日', '一', '二', '三', '四', '五', '六']
      let getWeek = '星期' + weeks[week]
      this.nowTime =
        year +
        '年' +
        month +
        '月' +
        date +
        '日' +
        ' ' +

        getWeek
    },
    helloTimes() {
      let hh = new Date().getHours()

      if (0 < hh && hh < 12) {
        this.hello = '上午好'
      } else if (hh < 18) {
        this.hello = '下午好'
      } else {
        this.hello = '晚上好'
      }
    }
  }
}
</script>
<style scoped lang="stylus">
.home-wrapper

  .li {
    float: left;
    width: 25%;
    font-size: 12px;
    color: rgb(185, 181, 189);
  }

  .da {
    float: left;
    width: 25%;
    font-size: 20px;
  }

  .first {
    float: left;
    width: 50%;
    margin-bottom: 20px;
  }

  .el-table .warning-row {
    background: rgb(39, 138, 230);
  }
</style>
<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
